<template>
  <div class="app-container">
    <el-table
      :data="pageData.items"
      style="width: 100%" v-loading="this.jobs.loading" empty-text="暂无数据">
      <el-table-column
        label="ID"
        prop="id"
        width="320"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        label="名称"
        width="280"
        prop="name"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        :formatter="timeFormatter"
        width="100"
      >
      </el-table-column>
      <el-table-column
        label="完成时间"
        prop="finishTime"
        :formatter="timeFormatter"
        width="100"
      >
      </el-table-column>
      <el-table-column
        label="取消"
        prop="cancelled"
      >
        <template slot-scope="scope">
          <span>{{scope.row.cancelled?'是':'否'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="异常退出"
        prop="exitUnexpectedly"
      >
        <template slot-scope="scope">
          <span>{{scope.row.exitUnexpectedly?'是':'否'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="完成度"
        prop="process"
      >
        <template slot-scope="scope">
          <span>{{scope.row.process}}%</span>
        </template>
      </el-table-column>
      <el-table-column
        label="完成"
        prop="finish"
      >
        <template slot-scope="scope">
          <span>{{scope.row.finish?'是':'否'}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { message, pagable, utils } from '@/mixins/'
  // import { mapGetters } from 'vuex'

  export default {
    mixins: [pagable, message, utils],
    data() {
      return {
        jobs: {
          loading: false
        }
      }
    },
    mounted() {
      this.getJobs()
    },
    methods: {
      getJobs() {
        this.$store.dispatch('getJobs', {
          page: this.pageData.currentPage,
          pageSize: this.pagination.size
        }).then((data) => {
          console.log(data)
          this.pageData.items = data.items
        })
      }
    }
  }
</script>

<style scoped>
  .line {
    text-align: center;
  }
</style>

